<template>
<div style="display: flex;width:100%;height: 100%;flex-direction: column;justify-content: space-between;color:white">
  <data-screen style="z-index:0"></data-screen>
  <div  style="display: flex;height:5%;flex-basis: 5%;width: 100%;z-index:1;justify-content:center;align-items:flex-start;color: white">
    <div style="display: flex;height:100%;flex-basis: 16%;width: 16%;align-items: center;">
      <el-image :src="require('@/assets/images/dataScreen/weather.png')" style="width:40px;height:31px;margin:0 10px"></el-image>
      <div>22℃~29℃</div>
      <div style="margin:0 20px">{{currentDate}}</div>
    </div>
    <div class="header">馆陶智慧供水</div>
    <div style="display: flex;height:100%;flex-basis: 16%;width: 16%;align-items: center">
      <div style="display: flex;height:100%;flex-basis: 70%;width: 70%;align-items: center;justify-content: flex-end">
        <el-image :src="require('@/assets/images/dataScreen/admin.png')" style="width:20px;height: 19px;margin-right: 10px"></el-image>
        <div>admin</div>
      </div>
      <div style="display: flex;height:100%;flex-basis: 30%;width: 30%;align-items: center;justify-content: flex-end;margin-right: 10px">
        <el-image  :src="require('@/assets/images/dataScreen/home.png')" style="width:20px;height: 19px;margin-right: 10px"></el-image>
      </div>

    </div>
  </div>
  <div style="display: flex;height:55%;flex-basis: 55%;width: 100%;align-items: center;justify-content: space-between">
    <div style="display: flex;height:100%;flex-basis: 10%;width: 10%;align-items: center;z-index: 1">
      <main-left-content></main-left-content>
    </div>
<!--    <div  style="display: flex;height:100%;flex-basis: 82%;width: 82%;align-items: center">-->
<!--      -->
<!--    </div>-->
   <div style="display: flex;height:100%;flex-basis: 8%;width: 8%;align-items: center;z-index: 1;">
       <right-menu></right-menu>
   </div>

  </div>
  <div class="bottom" >
      <el-tabs  v-model="activeName" @tab-click="handleClick">
        <el-tab-pane class="tabsContent" name="管网">
          <span slot="label"><el-image :src="require('@/assets/images/dataScreen/gw.png')" style="width: 14px;height: 14px;margin-right: 10px"></el-image>管网</span>
        </el-tab-pane>
        <el-tab-pane class="tabsContent" name="水质">
          <span slot="label"><el-image :src="require('@/assets/images/dataScreen/sz.png')" style="width: 14px;height: 14px;margin-right: 10px"></el-image>水质</span>
        </el-tab-pane>
        <el-tab-pane class="tabsContent" name="视频">
          <span slot="label"><el-image :src="require('@/assets/images/dataScreen/sp.png')" style="width: 14px;height: 14px;margin-right: 10px"></el-image>视频</span>
        </el-tab-pane>
        <el-tab-pane class="tabsContent" name="压力">
          <span slot="label"><el-image :src="require('@/assets/images/dataScreen/yl.png')" style="width: 14px;height: 14px;margin-right: 10px"></el-image>压力</span>
        </el-tab-pane>
        <el-tab-pane class="tabsContent" name="简介">
          <span slot="label"><el-image :src="require('@/assets/images/dataScreen/jj.png')" style="width: 14px;height: 14px;margin-right: 10px"></el-image>简介</span>
        </el-tab-pane>
      </el-tabs>
    <div style="display: flex;flex-basis: 92%;width:100%;height: 92%;justify-content: space-between">
      <div class="bottomMain">
        <operation-monitoring></operation-monitoring>
      </div>
      <div class="bottomMain">
        <water-warning></water-warning>
      </div>
      <div class="bottomMain">
        <sales-poor></sales-poor>
      </div>
      <div class="bottomMain">
        <special-topic @topic-dialog-open="topicDialogOpen"></special-topic>
      </div>
    </div>
  </div>
  <el-image :src="require('@/assets/images/dataScreen/mapIcon.png')" class="mapIcon" @click="dialogInfoOpen=true"></el-image>
  <div class="dialogInfo" v-if="dialogInfoOpen">
    <div class="close" style="display: flex;height:5%;flex-basis: 5%;width: 100%;justify-content: flex-end;">
      <i class="el-icon-close" @click="dialogInfoOpen=false"></i>
    </div>
    <div style="display: flex;height:15%;flex-basis: 15%;width: 100%;justify-content: center">{{title}}</div>
    <div style="display: flex;height:80%;flex-basis: 80%;width: 100%;align-items: center;flex-direction: column;justify-content: space-around">
      <div class="formItem">
        <div  class="itemLabel">供水站编码</div>
        <div style="height: 100%;">:</div>
        <div class="itemInfo">{{form.code}}</div>
      </div>
      <div class="formItem">
        <div  class="itemLabel" >时间</div>
        <div style="height: 100%;">:</div>
        <div class="itemInfo">{{form.time}}</div>
      </div>
      <div class="formItem">
        <div  class="itemLabel">累计流量</div>
        <div style="height: 100%;">:</div>
        <div class="itemInfo">{{form.traffic}}</div>
      </div>
      <div class="formItem">
        <div  class="itemLabel">联系人</div>
        <div style="height: 100%;">:</div>
        <div class="itemInfo">{{form.person}}</div>
      </div>
      <div class="formItem">
        <div  class="itemLabel" >联系方式</div>
        <div style="height: 100%;">:</div>
        <div class="itemInfo">{{form.contact}}</div>
      </div>
      <!--          <el-form label-width="80px" :model="form">-->
      <!--            <el-form-item label="供水站编码">-->
      <!--              <el-input v-model="form.code"></el-input>-->
      <!--            </el-form-item>-->
      <!--            <el-form-item label="时间">-->
      <!--              <el-input v-model="form.time"></el-input>-->
      <!--            </el-form-item>-->
      <!--            <el-form-item label="累计流量">-->
      <!--              <el-input v-model="form.traffic"></el-input>-->
      <!--            </el-form-item>-->
      <!--            <el-form-item label="联系人">-->
      <!--              <el-input v-model="form.person"></el-input>-->
      <!--            </el-form-item>-->
      <!--            <el-form-item label="联系方式">-->
      <!--              <el-input v-model="form.contact"></el-input>-->
      <!--            </el-form-item>-->
      <!--          </el-form>-->
    </div>
  </div>
  <el-dialog
    style="z-index:1"
    :title="topicTitle"
    :modal="false"
    :visible.sync="dialogVisible"
    :width="dialogWidth"
    :show-close="false"
  >
<!--    <water-convenience />-->
<!--    <water-ensure-rate />-->
<!--    <maintenance-type />-->
<!--    <maintenance-source />-->
    <comparative-analysis sort-by="" y-data2="漏损量" y-data1="漏损率" x-name="区域A" />
    <!--    <el-image :src="topicUrl" class="image1" ></el-image>-->
  </el-dialog>


</div>
</template>

<script>
import dataScreen from "@/views/dataScreen/dataScreen";
import operationMonitoring from "@/views/dataScreen/operationMonitoring";
import salesPoor from "@/views/dataScreen/salesPoor";
import waterWarning from "@/views/dataScreen/waterWarning";
import specialTopic from "@/views/dataScreen/specialTopic";
import mainLeftContent from "@/views/dataScreen/mainLeftContent";
import rightMenu from "@/views/dataScreen/rightMenu";
import waterConvenience from "@/views/dataScreen/topic/waterConvenience.vue";
import waterEnsureRate from "@/views/dataScreen/topic/waterEnsureRate.vue";
import maintenanceType from "@/views/dataScreen/topic/maintenanceType.vue";
import maintenanceSource from "@/views/dataScreen/topic/maintenanceSource.vue";
import comparativeAnalysis from "@/views/dataScreen/topic/comparativeAnalysis.vue";
export default {
  name: "index",
  components:{
    dataScreen,
    operationMonitoring,
    salesPoor,
    waterWarning,
    specialTopic,
    mainLeftContent,
    rightMenu,
    waterConvenience,
    waterEnsureRate,
    maintenanceType,
    maintenanceSource,
    comparativeAnalysis
  },
  data(){
    return{
      activeName: '简介',
      currentDate:this.getDatetimeValue(),
      title:'后曹堡村',
      form:{
        code:'2206402849',
        time:this.getDatetimeValue(),
        traffic:'25735.69',
        person:'耿玉林',
        contact:'15081013621'
      },
      topicTitle:'',
      drawer:false,
      dialogVisible:false,
      topicUrl:'',
      dialogWidth:'300px',
      dialogInfoOpen:false,
    }
  },
  methods:{
    topicDialogOpen(data){
      this.topicTitle=data
      this.dialogWidth='300px'
      // if (data.includes('热线')){
      //   this.topicUrl=require('@/assets/images/dataScreen/topic/1.png')
      // }else if (data === '用水方便程度'){
      //   this.topicUrl=require('@/assets/images/dataScreen/topic/2.png')
      // }else if (data === '供水保证率'){
      //   this.topicUrl=require('@/assets/images/dataScreen/topic/3.png')
      // }else if (data === '工程建设'){
      //   this.topicUrl=require('@/assets/images/dataScreen/topic/4.png')
      // }else if (data === '管网养护'){
      //   this.dialogWidth='550px'
      //   this.topicUrl=require('@/assets/images/dataScreen/topic/5.png')
      // }else if (data === '漏损分析'){
      //   this.dialogWidth='550px'
      //   this.topicUrl=require('@/assets/images/dataScreen/topic/6.png')
      // }else if (data === '区域用水分析'){
      //   this.topicUrl=require('@/assets/images/dataScreen/topic/7.png')
      // }else if (data === '二次供水'){
      //   this.dialogWidth='550px'
      //   this.topicUrl=require('@/assets/images/dataScreen/topic/8.png')
      // }
      this.dialogVisible=!this.dialogVisible
    },
    handleClick(tab, event) {
    },
// 获取当前时间
    getDatetimeValue(){
      // 获取当前时间
      const now = new Date();
      // 格式化时间
      const year = now.getFullYear();
      const month = now.getMonth() + 1;
      const day = now.getDate();
      const hour = now.getHours();
      const minute = now.getMinutes();
      const second = now.getSeconds();
      const currentTime = `${year}-${month >= 10 ? month : '0' + month}-${day >= 10 ? day : '0' + day} ${hour >= 10 ? hour : '0' + hour}:${minute >= 10 ? minute : '0' + minute}:${second >= 10 ? second : '0' + second}`;
      // 将格式化后的时间存入 data 中
      return currentTime;
    },
  }
}
</script>

<style  lang="scss" scoped>
::v-deep .el-dialog:not(.is-fullscreen) {
  margin-top: 17% !important;
  /* margin-bottom: 0vh !important; */
  margin-right: 5% !important;
}
::v-deep .el-dialog{
  background-color: rgba(0,0,0,0);
}
::v-deep .el-dialog__wrapper{
  z-index:2!important;
}
::v-deep .el-tabs__item{
  color:white;
}
::v-deep .el-tabs__item.is-active {
  color: #1890ff;
}
::v-deep .el-tabs__item:hover {
  color: #1890ff;
  cursor: pointer;
}
::v-deep .el-tabs__active-bar{
  background-image: url(~@/assets/images/dataScreen/tabsUnderline.png);
  background-size: 100% 100%;
  background-color: rgba(0,0,0,0);
  height:6px;
  width: 80px !important;
  left: -10px;
}
::v-deep .el-tabs__nav-wrap::after{
  background-color: rgba(0,0,0,0);
}
::v-deep .el-tabs__header{
  margin:0;
}
.header{
  display: flex;
  height:100%;
  flex-basis: 68%;
  width: 67%;
  color:white;
  font-weight: 900;
  font-size: 20px;
  justify-content: center;
  align-items: center;
  background-image: url(~@/assets/images/dataScreen/header.png);
  background-size: 100% 100%;
}
.mapIcon{
  height: 36px;
  width: 36px;
  position:absolute;
  left:498px;
  top:360px;
  z-index:2;
}
.mapIcon:hover{
  cursor: pointer;
}
.dialogInfo{
  z-index:2;
  //display: flex;
  //flex-direction: column;
  //align-items: center;
  background-image: url(~@/assets/images/dataScreen/dialog.png);
  background-size: 100% 100%;
  height: 192px;
  width: 258px;
  position:absolute;
  left:385px;
  top:168px;
  padding:10px 20px 20px 20px;
  .formItem{
    display: flex;
    height:20%;
    flex-basis: 20%;
    width: 100%;
    align-items: center;
    .itemLabel{
      text-align: justify;
      text-align-last: justify;
      text-justify: distribute-all-lines;
      //display: flex;
      width:100px;
      margin-right: 3px;
      //flex-basis: 40%;
      height: 100%;
    }
    .itemInfo{
      margin-left: 10px;
      display: flex;
      width:60%;
      flex-basis: 60%;
      height: 100%;
    }
  }
  .close:hover{
    cursor: pointer;
  }
}
.bottom{
  display: flex;
  height:40%;
  flex-basis: 40%;
  width: 100%;
  z-index: 3;
  flex-direction: column;
  background-image: url(~@/assets/images/dataScreen/bottomBackground.png);
  background-size: 100% 100%;
  justify-content: flex-end;
  align-items: center;
  .bottomTabs{
    display: flex;
    width:23%;
    flex-basis: 8%;
    height:8%;
    color:white;
    font-size: 18px;
    padding:20px;
    justify-content: space-around;
    .tabsContent{
      display: flex;
      flex-basis: 20%;
      height: 100%;
      width:20%;
      font-size: 12px;
      align-items: center;
    }
  }
  .bottomMain{
    display: flex;
    width:25%;
    flex-basis: 25%;
    height:100%;
    color:white;
    font-size: 18px;
    padding:20px;
  }
}

</style>
